<!--
 描述: 中上
-->
<template>
    <div class="brand-container">
        <div class="wrap">
            <section class="mainbox">
                <div class="item center">
                    <div class="resume">
                        <div class="resume-hd">
                            <ul>
                                <li>
                                    <countTo :startVal='startVal' :endVal='cun' :duration='6000' separator=""  id="b1"></countTo>
                                </li>
                                <li>
                                    <countTo :startVal='startVal' :endVal='jjcun' :duration='6000' separator="" id="b2"></countTo>
                                </li>
                                <li>
                                    <countTo :startVal='startVal' :endVal='xgcun' :duration='6000' separator="" id="b3"></countTo>
                                </li>
                                <li>
                                    <countTo :startVal='startVal' :endVal='yjcun' :duration='6000' separator="" id="b4"></countTo>
                                </li>
                                <li>
                                    <countTo :startVal='startVal' :endVal='rhcun' :duration='6000' separator="" id="b5"></countTo>
                                </li>
                            </ul>
                        </div>
                        <div class="resume-bd">
                            <ul>
                                <li>行政村（单位：个）</li>
                                <li >集体经济村（单位：个）</li>
                                <li>选派干部到村任职（单位：个）</li>
                                <li>一肩挑村（单位：个）</li>
                                <li>软弱涣散村（单位：个）</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
    import '@/assets/js/flexible'
    import '@/assets/js/china'
    import countTo from 'vue-count-to'
    export default {
        name: 'ringPiecun',
        components: {
            countTo
        },
        data() {
            return {
                baseUrl: domain.testUrl,
                startVal: 0,
                cun: 0,
                jjcun: 0,
                xgcun: 0,
                yjcun: 0,
                rhcun: 0,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');
                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findCunByType?name="+ this.baseName;
                axios.post(url).then((response) => {
                    document.getElementById('b1').innerText =  response.data[0].cun;
                    document.getElementById('b2').innerText =  response.data[0].jjcun;
                    document.getElementById('b3').innerText =  response.data[0].xgcun;
                    document.getElementById('b4').innerText =  response.data[0].yjcun;
                    document.getElementById('b5').innerText =  response.data[0].rhcun;
                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
                // var urls = this.baseUrl + "memberDatav/findOrganizationByOtype?name="+ this.baseName;
                // axios.post(urls).then((response) => {
                //     document.getElementById('b3').innerText =  response.data[0].xgcun;
                // }).catch(function (response) {
                //     console.log(response); //发生错误时执行的代码
                // });
            },
        },
    }
</script>
<style lang="scss" scoped>
    .brand-container {
        position: absolute;
        left: 510px;
        top: 80px;
        width: 20%;
        height: 20%;
        .wrap {
            .mainbox {
                min-width: 880px;
                max-width: 1920px;
                padding: 0.125rem 0.125rem 0;
                display: flex;
                .item {
                    flex: 3;
                    &.center {
                        flex: 5;
                        margin: 0 0.125rem 0.1rem;
                        overflow: hidden;
                        .resume {
                            background: rgba(101, 132, 226, 0.1);
                            padding: 0.1875rem;
                            .resume-hd {
                                position: relative;
                                border: 1px solid rgba(25, 186, 139, 0.17);
                                ul {
                                    display: flex;
                                    %li-line {
                                        content: "";
                                        position: absolute;
                                        height: 50%;
                                        width: 1px;
                                        background: rgba(255, 255, 255, 0.2);
                                        top: 25%;
                                    }
                                    li {
                                        position: relative;
                                        flex: 1;
                                        text-align: center;
                                        height: 1.2rem;
                                        line-height: 1.2rem;
                                        font-size: 0.50rem;
                                        color: #ffeb7b;
                                        padding: 0.05rem 0;
                                        font-family: 'DIGITALDREAMFAT';
                                        font-weight: bold;
                                        &:nth-child(0) {
                                            &:after {
                                                @extend %li-line;
                                                right: 0;
                                            }
                                            &:before {
                                                @extend %li-line;
                                                left: 0;
                                            }
                                        }
                                    }
                                }
                                &:before {
                                    content: "";
                                    position: absolute;
                                    width: 30px;
                                    height: 10px;
                                    border-top: 2px solid #02a6b5;
                                    border-left: 2px solid #02a6b5;
                                    top: 0;
                                    left: 0;
                                }
                                &:after {
                                    content: "";
                                    position: absolute;
                                    width: 30px;
                                    height: 10px;
                                    border-bottom: 2px solid #02a6b5;
                                    border-right: 2px solid #02a6b5;
                                    right: 0;
                                    bottom: 0;
                                }
                            }
                            .resume-bd {
                                ul {
                                    display: flex;
                                    li {
                                        /*flex: 1;*/
                                        height: 0.5rem;
                                        line-height: 0.5rem;
                                        text-align: center;
                                        font-size: 0.165rem;
                                        color: rgba(255, 255, 255, 0.7);
                                        padding-top: 0.125rem;
                                        padding-right:20px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
